import React, { memo } from 'react'

import { getSizeImage } from '@/utils/format-utils';

import { RankingWrapper } from './style'

export default memo(function TopRanking(props) {

  const { info = {} } = props
  const { tracks = [] } = info;

  return (
    <RankingWrapper>
      <div className="rank-top">
        <div className="rank-top-left">
          <img src={getSizeImage(info.coverImgUrl)} alt=""></img>
          <a href="/todo" className="sprite_covor"> </a>
        </div>
        <div className="rank-top-right">
          <h3>{info.name}</h3>
          <div className="btn">
            <a href="/todo" className="sprite_02 btn-left"> </a>
            <a href="/todo" className="sprite_02 btn-right"> </a>
          </div>
        </div>
      </div>
      <div className="rank-content">
        <ul>
          {
            tracks.slice(0, 10).map((item, index) => {
              return (
                <li key={item.id}>
                  <span className="name text-nowrap">{index+1 + '. ' + item.name}</span>
                  <span className="rank-content-icon operator">
                    <a href="/todo" className="sprite_02 icon1"> </a>
                    <a href="/todo" className="sprite_icon2 icon2"> </a>
                    <a href="/todo" className="sprite_02 icon3"> </a>
                  </span>
                </li>
              )
            })
          }
        </ul>
      </div>
      <div className="footer">查看更多</div>
    </RankingWrapper>
  )
})